import React, { Component } from 'react';
// import logo from '../assets/logo192.png'
import {nav} from '../../utils/api'
class MyCatelist extends Component {
    /* 定义组件状态 */
    state = {
        catelist:[],
        count:0,
        isshow:false
    }
    componentDidMount(){ //组件挂载完成
        //使用定时器模拟发请求的延迟
            //直接给这个写法不会触发组件更新
            //this.state.catelist = [];

            //setState()函数的作用: 1.保存数据到state,2.触发组件更新
            //必须在想要组件更新时 主动调用 setState() 方法 触发组件更新( 异步更新 )
            nav().then((res)=>{
                // console.log(res.data.list);
this.setState({
                catelist: res.data.list
            })
            })
             //不能在setState之后立即获取最新的state值, 只能在回调函数中获取, 但是回调函数本身不是必须的(可以省略).
                // console.log(this.state.catelist);
           
            //console.log(this.state.catelist); //这里无法获取最新的state值

        
    }
    render() {
        return (
            <div className='mycatelist'>
                {
                    this.state.catelist.map((item,index)=>{
                        return (
                                /* 当属性的值是 表达式, 表达式的外面必须用{}包裹, 同时属性值不需要用""包裹 */
                                <div className="cate" key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                </div>
                        )
                    }) 
                }
            </div>
        );
    }
}

export default MyCatelist;